<div class="admin-wizard-controls">
  <h3>{{i18n "admin.wizard.custom_field.nav_label"}}</h3>

  <div class="buttons">
    {{d-button
      label="admin.wizard.custom_field.add"
      icon="plus"
      action=(action "addField")
    }}
  </div>
</div>

{{wizard-message
  key=this.messageKey
  opts=this.messageOpts
  type=this.messageType
  url=this.documentationUrl
  component="custom_fields"
}}

<div class="admin-wizard-container">
  {{#if this.customFields}}
    <table>
      <thead>
        <tr>
          {{#each this.fieldKeys as |key|}}
            <th>{{i18n (concat "admin.wizard.custom_field." key ".label")}}</th>
          {{/each}}
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#each this.customFields as |field|}}
          {{custom-field-input
            field=field
            removeField=(action "removeField")
            saveField=(action "saveField")
          }}
        {{/each}}
      </tbody>
    </table>
  {{/if}}
</div>